//init
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var playerX = 0;
var playerY = 0;
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
var img = new Image();
img.src = "image/silence.png";

//keyboard
document.addEventListener("keyup",keyUpHandler,false);
document.addEventListener("keydown",keyDownHandler,false);
function keyDownHandler(e){
	if(e.keyCode == 39){
		rightPressed = true;
	}else if(e.keyCode == 37){
		leftPressed = true;
	}else if(e.keyCode == 38){
		upPressed = true;
	}else if(e.keyCode == 40){
		downPressed = true;
	}
}
function keyUpHandler(e){
	if(e.keyCode == 39){
		rightPressed = false;
	}else if(e.keyCode == 37){
		leftPressed = false;
	}else if(e.keyCode == 38){
		upPressed = false;
	}else if(e.keyCode == 40){
		downPressed = false;
	}
}

//draw
function draw(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	if(rightPressed){
		if(playerX<740){
			playerX += 5;
		}
	}else if(leftPressed){
		if(playerX>-30){
			playerX -= 5;
		}
	}else if(upPressed){
		if(playerY>0){
			playerY -= 5;
		}
	}else if(downPressed){
		if(playerY<550){
			playerY += 5;
		}
	}
	ctx.drawImage(img,playerX,playerY);
	requestAnimationFrame(draw);
}
draw();